<template>
  <!-- 首页 -->
  <div class="stock-service"> 
    <c-title :text="allData.name"></c-title>
    <div class="top-title">
      <img :src="allData.avatar" alt="" />
      <div class="right">
        <span class="name">{{allData.nickname}}</span>
        <span class="id-value">ID {{allData.id}}</span>
      </div>
    </div>
    <div class="bottom-detail">
      <div class="card-pane" @click="goStockAggregatePage">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/stock-service/baiwang_poly.png" alt="" />
        <span class="page-name">{{allData.name}}</span>
      </div>
      <div class="card-pane" @click="goMyInventoryPage('我的存货')">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/stock-service/baiwang_myStock.png" alt="" />
        <span class="page-name">我的存货</span>
      </div>
      <div class="card-pane" @click="goMyInventoryPage('代销管理')">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/stock-service/baiwang_manage.png" alt="" />
        <span class="page-name">代销管理</span>
      </div>
      <div class="card-pane" @click="inventoryOrder">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/stock-service/baiwang_stockOrder.png" alt="" />
        <span class="page-name">存货订单</span>
      </div>
      <div class="card-pane" @click="pickUpOrders">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/stock-service/baiwang_take.png" alt="" />
        <span class="page-name">提货订单</span>
      </div>
      <div class="card-pane" @click="goInventoryDetailsPage('存货明细')">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/stock-service/baiwang_stockDetail.png" alt="" />
        <span class="page-name">存货明细</span>
      </div>
      <div class="card-pane" @click="goInventoryDetailsPage('代销明细')">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/stock-service/baiwang_saleDetail.png" alt="" />
        <span class="page-name">代销明细</span>
      </div>
      <div class="card-pane" @click="goRevenueDetailsPage">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/stock-service/baiwang_income.png" alt="" />
        <span class="page-name">收入明细</span>
      </div>
      <div class="card-pane" @click="goFinancialStatementspage">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/stock-service/baiwang_finance.png" alt="" />
        <span class="page-name">财务报表</span>
      </div>
    </div>
  </div>
</template>

<script>
import index_controller from "./index_controller";

export default index_controller;
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" scoped>
.stock-service {
  .top-title {
    background: #ff8924;
    height: 6.25rem;
    display: flex;
    padding: 0.94rem;

    img {
      height: 3.44rem;
      width: 3.44rem;
      border-radius: 50%;
      margin: inherit;
    }

    .right {
      display: flex;
      flex-direction: column;
      height: 3.44rem;
      justify-content: space-between;
      margin-left: 0.44rem;

      .name {
        font-size: 1rem;
        font-weight: bold;
        color: #fff;
        text-align: left;
      }

      .id-value {
        padding: 0.2rem 0.89rem;
        background: #fff;
        border-radius: 20px;
        font-size: 0.68rem;
        font-weight: 400;
        color: #ba750c;
      }
    }
  }

  .bottom-detail {
    background: #fff;
    border-radius: 0.625rem 0.625rem 0 0;
    padding: 0 0 1.09rem 0;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    top: -0.5rem;

    .card-pane {
      padding-top: 1.56rem;
      display: flex;
      flex-direction: column;
      width: 25%;
      justify-content: center;
      align-items: center;

      img {
        width: 2.31rem;
        height: 2.31rem;
        border-radius: 50%;
        margin: inherit;
      }

      .page-name {
        margin-top: 0.88rem;
      }
    }
  }
}
</style>
